<template>
    <div class="orderList">
        <div class="content" v-if="orderList.length">
            <div class="order" v-for="(item, idx) in orderList" :key="idx">
                <div class="order-countDown" v-if="item.status == '1'">
                  <p>{{ item?.interTimeName }}</p>
                </div>
                <div class="order-header">
                    <div class="header-code">
                      <p>订单号：</p>
                      <p>{{ item.code }}</p>
                    </div>
                    <p class="header-status">{{ orderStatus[item.status] }}</p>
                </div>
                <div class="order-commodity">      
                    <div class="commodity-photo" v-if="item.list.length == 1">
                      <Image class="commodity-photo-img" :src="item.list[0].produce_img[0]"></Image>
                    </div>
                    <div class="commodity-photos" v-else>
                        <template v-for="(i, lIdx) in item.list.slice(0,3)" :key="lIdx">
                          <Image class="commodity-photos-img" :src="i != '' ? i.produce_img[0] : ''"></Image>
                        </template>
                    </div>
                    <div class="commodity-message" v-if="item.list.length == 1">
                      <p>{{ item.list[0].produce_name }}</p>
                    </div>
                    <div :class="item.list.length == 1 ? 'commodity-priceAndNum' : 'commodity-priceAndNum1'">
                        <p v-if="item.list.length == 1">{{ DisposePrice(item.price) }}</p>
                        <p class="priceAndNum-num" v-if="item.list.length == 1">x {{ item.total }}</p>
                        <p class="priceAndNum-num" v-else>共 {{item.total }} 件</p>
                    </div>
                </div>
                <div class="order-realityPay">
                  <p class="integral-message" v-if="item.type == 2">积分抵扣：{{ item.price }}</p>
                  <div class="realityPay-message">
                    <p>实付款</p>
                    <p v-if="item.type == 1">{{DisposePrice(item.price)}}</p>
                    <p v-else>¥ 0</p>
                  </div>
                </div>
                <div class="item-opera" v-if="item.status == 1">
                  <nut-button 
                    type="info" 
                    size="mini" 
                    class="btn-oprta"
                    v-if="item.status == 1"
                    @click="GoPay(item)">去支付</nut-button>
                  <!-- <nut-button type="info" size="mini" class="btn-oprta">取消订单</nut-button> -->
                </div>
            </div>
        </div>
        <nut-empty description="无数据" v-else></nut-empty>
    </div>
  </template>
  
  <script>
  import { onMounted, reactive, toRefs } from 'vue';
  import './index.scss';
  import { GetOrderList } from '../utils/api.js';
  import Taro from '@tarojs/taro';
  import currency from 'currency.js';
  import moment from '../utils/moment.js';
  
  export default {
    name: 'Index',
    components: {
      
    },
    setup(){
      const orderStatus = {
        "1": "未支付",
        "2": "已支付",
        "3": "未支付",
        "4": "已关闭"
      }
      const state = reactive({
        orderList: [],
      });
      const GetOrder = async () => {
        let orderRes = await GetOrderList({});
        if(orderRes.code == 200) {
          state.orderList = orderRes.data;
          DisposeCountDown();
        }
      }
      onMounted(() => {
        GetOrder();
      })
      const GoPay = (traVal) => {
        if(traVal.list.length == 1) {
          Taro.navigateTo({
            url: `/pages/commodity-closeAnAccount/index?entryType=1&commodityId=${traVal.list[0].produce_id}`
          })
        } else {
          Taro.navigateTo({
            url: `/pages/commodity-closeAnAccount/index?entryType=2&commodityList=${JSON.stringify(traVal.list)}&totalPrice=${traVal.price}&totalAmount=${traVal.total}`
          })
        }
      }
      const DisposePrice = (amount) => {
          return currency(Math.round(Number(amount) * 100).toString() , { fromCents: true, separator: ',',precision: 2, symbol: '¥ ' }).format()
      }
      // 处理倒计时
      const DisposeCountDown = () => {
        setInterval(() => {
          state.orderList.forEach(i => {
            if(i.status == 1) {
              let start = moment(new Date()); //获取开始时间
              let end = moment(new Date(i.timeDelay)); //结束时间
              let diff = end.diff(start); //时间差
              var timediff = Math.round(diff / 1000);
              //获取还剩多少分钟
              var minute = parseInt((timediff / 60) % 60);
              //获取还剩多少秒
              var second = timediff % 60;
              if (minute <= 0 && second <= 0) {
                i.interTimeName = undefined;
                clearInterval(i.interVal);
                GetOrder();
              }
              i.interTimeName = `剩余${timerFilter(minute)}分${timerFilter(second)}秒自动关闭`;
              //给小于10的数值前面加 0
              function timerFilter(params) {
                if (params - 0 < 10) {
                  return "0" + params;
                } else {
                  return params;
                }
              }
            } else {
              clearInterval(i.interVal)
            }
          })
        },1000);
      }
      return {
        orderStatus,
        GoPay,
        DisposePrice,
        ...toRefs(state),
      }
    }
  }
  </script>